// 抽离自定义指令v-imageerror
export const imageerror = {
  // 指令对象 会在当前的dom元素插入到节点之后执行
  inserted(dom, options) {
    // options是 指令中的变量的解释  其中有一个属性叫做 value
    // dom 表示当前指令作用的dom对象
    // dom认为此时就是图片
    // 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
    // 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
    // dom可以注册error事件
    console.log('图片信息', options.value)
    dom.onerror = function() {
      dom.src = options.value
    }
    // dom.onerror = function() { 因为会有dom.src=''的情况
    if (!dom.src) {
      dom.src = options.value
    }
  },

  // 1、bind：只调用一次，指令第一次绑定到元素时调用。和样式相关的操作可以用 bind。
  // 2、inserted：元素插入父节点时调用。和js行为有关的操作，最好用 inserted。
  // 3、update：更新时调用,一般里面的代码逻辑与 bind方法中一致。
  // 4、componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  // 5、unbind：只调用一次，指令与元素解绑时调用。
  componentUpdated(dom, options) {
    dom.src = dom.src || options.value
  }
}
